<template>
	<view class="functional-module">
		<view class="functional-module-container" @click="functionalClick">
			<image class="functional-module-container-icon" :src="module.picurl" mode="aspectFill"></image>
			<view class="functional-module-container-name">{{module.name}}</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		module:{
			type:Object,
			default(){
				return {
					name: '默认名称',
					picurl: ''
				}
			}
		}
	});
	
	const functionalEmit = defineEmits([
		'functionalClick'
	]);
	
	const functionalClick = () => {
		functionalEmit('functionalClick')
	};
	
</script>

<style lang="scss" scoped>
.functional-module {
		display: flex;
		.functional-module-container {
			width: 300rpx;
			height: 300rpx;
			margin: 25rpx;
			border-radius: 10rpx;
			background-color: $border-color-light;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.functional-module-container-icon {
				width: 150rpx;
				height: 150rpx;
			}
			.functional-module-container-name {
				margin-top: 40rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
</style>